<template>
  <a-modal
    :title="currTitle"
    :visible="visible"
    centered
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    width="95vw"
  >
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
    </template>
    <div style="width: 100%; height: 100%">
      <!--                 :defaultExpandAllRows='true' -->
      <a-table
        :columns="timeList"
        :data-source="timeListData"
        childrenColumnName="childrens"
        rowKey="timeNodeCode"
        :pagination="false"
        :indentSize="20"
        :expandIcon="expandIcon"
      >
        <template slot="timeNode" slot-scope="text, record">
          <span v-if="record.parentCode == '-1'">
            {{ record.timeNode }}
          </span>
          <div v-if="record.parentCode != '-1'">
            <span class="flex-half" style="padding-left: 30px">
              <a-tooltip placement="left" arrow-point-at-center>
                <template slot="title">
                  <span>{{ record.reportStatus == 2 ? '已完成' : '未完成' }}</span>
                </template>
                <!-- 1创建中、2已完成 3未完成 4延误 5全部 -->
                <!-- color-suc color-dis color-err dot-->
                <span :class="['dot', record.colorBg]"></span>
              </a-tooltip>
            </span>
            <span>{{ record.timeNode }}</span>
          </div>
        </template>
        <template slot="reportUserName" slot-scope="text">
          {{ text ? text : projectManager }}
        </template>
        <template slot="realCompletionSummary" slot-scope="text, record">
          {{ text ? text : record.reportMemo ? record.reportMemo : '' }}
        </template>
        <template slot="planStartDate" slot-scope="text, record">
          {{ status === 1 ? text : record.planStartDateAudit }}
        </template>
        <template slot="completionDate" slot-scope="text, record">
          {{ status === 1 ? text : record.completionDateAudit }}
        </template>
        <template slot="realCompletionDate" slot-scope="text, record">
          <span
            v-if="projectClass == '60' && status > 3 && status != 7 && (projectAll == 1 || projectReport == 1 || flag)"
            @click="openTimeReportOn60(record)"
            title="点击可查看报工明细"
            style="color: blue"
            >{{ text }}</span
          >
          <span v-else>{{ text }}</span>
        </template>
        <template slot="reportStatus" slot-scope="text,record">
          {{ tipText(record) }}
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'timeListShowInPop',
  data() {
    return {
      timeList: [],
      timeListNo60: [
        {
          title: '项目关键节点',
          width: '10%',
          align: 'left',
          dataIndex: 'timeNode',
          key: 'timeNode',
          scopedSlots: { customRender: 'timeNode' },
        },
        { title: '主要完成内容', width: '20%', align: 'center', dataIndex: 'jobContent', key: 'jobContent' },
        {
          title: '计划开始时间',
          width: '8%',
          align: 'center',
          dataIndex: 'planStartDate',
          key: 'planStartDate',
          scopedSlots: { customRender: 'planStartDate' },
        },
        {
          title: '计划完成时间',
          width: '8%',
          align: 'center',
          dataIndex: 'completionDate',
          key: 'completionDate',
          scopedSlots: { customRender: 'completionDate' },
        },
        {
          title: '报工人',
          width: '8%',
          align: 'center',
          dataIndex: 'addReportUserName',
          key: 'addReportUserName',
          scopedSlots: { customRender: 'reportUserName' },
        },
        {
          title: '预计完成时间',
          width: '8%',
          align: 'center',
          dataIndex: 'planCompletionDate',
          key: 'planCompletionDate',
        },
        {
          title: '实际完成时间',
          width: '8%',
          align: 'center',
          dataIndex: 'realCompletionDate',
          key: 'realCompletionDate',
        },
        { title: '延误原因', width: '15%', align: 'center', dataIndex: 'delayReason', key: 'delayReason' },
        {
          title: '实际完成情况',
          width: '15%',
          align: 'center',
          dataIndex: 'realCompletionSummary',
          key: 'realCompletionSummary',
          scopedSlots: { customRender: 'realCompletionSummary' },
        },
      ],
      url: {
        queryListByBuildId: '/projectBuildTime/queryListByBuildId',
        checkReportFlag: '/projectBuildTime/checkReportFlag',
      },
      // queryListByBuildId queryListByBuildIdNoTcodeInfo
      timeListData: [],
      visible: false,
      currTitle: '时间节点',
      confirmLoading: false,
      colorBg: 'color-suc',
      projectManager: '',
      projectClass: '',
      status: 0,
      timeList60: [
        {
          title: '项目关键节点',
          width: '10%',
          align: 'left',
          dataIndex: 'timeNode',
          key: 'timeNode',
          scopedSlots: { customRender: 'timeNode' },
        },
        { title: '主要完成内容', width: '10%', align: 'center', dataIndex: 'jobContent', key: 'jobContent' },
        {
          title: '计划开始时间',
          width: '8%',
          align: 'center',
          dataIndex: 'planStartDate',
          key: 'planStartDate',
          scopedSlots: { customRender: 'planStartDate' },
        },
        {
          title: '计划完成时间',
          width: '8%',
          align: 'center',
          dataIndex: 'completionDate',
          key: 'completionDate',
          scopedSlots: { customRender: 'completionDate' },
        },
        {
          title: '报工人',
          width: '8%',
          align: 'center',
          dataIndex: 'addReportUserName',
          key: 'addReportUserName',
          scopedSlots: { customRender: 'reportUserName' },
        },
        {
          title: '预计完成时间',
          width: '8%',
          align: 'center',
          dataIndex: 'planCompletionDate',
          key: 'planCompletionDate',
        },
        {
          title: '实际完成时间',
          width: '8%',
          align: 'center',
          dataIndex: 'realCompletionDate',
          key: 'realCompletionDate',
          scopedSlots: { customRender: 'realCompletionDate' },
        },
        { title: '延误原因', width: '10%', align: 'center', dataIndex: 'delayReason', key: 'delayReason' },
        {
          title: '报工进展',
          width: '15%',
          align: 'center',
          dataIndex: 'realCompletionSummary',
          key: 'realCompletionSummary',
          scopedSlots: { customRender: 'realCompletionSummary' },
        },
        { title: '报工收益', width: '8%', align: 'center', dataIndex: 'incomeMonthly', key: 'incomeMonthly' },
        { title: '报工状态', width: '7%', align: 'center', dataIndex: 'reportStatus', key: 'reportStatus',scopedSlots: { customRender: 'reportStatus' } },
      ],
      projectAll: '',
      projectReport: '',
      flag: false,
    }
  },
  methods: {
    tipText(item) {
      if (item.reportStatus == '2') {
        // this.colorBg = 'color-suc'
        return '已完成'
      } else {
        // this.colorBg = 'color-dis'
        return '未完成'
      }
    },
    doSelect(id, projectManager, projectClass, status, projectAll, projectReport) {
      this.projectManager = projectManager
      this.projectClass = projectClass
      this.status = status
      this.projectAll = projectAll
      this.projectReport = projectReport
      if (projectClass == 60) {
        this.timeList = this.timeList60
        if (!(status > 3 && status != 7 && (projectAll == 1 || projectReport == 1))) {
          this.checkFlag(id)
        }
      } else {
        this.timeList = this.timeListNo60
      }
      this.doGetTimeData(id)
    },
    handleOk() {
      this.visible = false
    },
    handleCancel() {
      this.timeListData = []
      this.visible = false
    },
    openTimeReportOn60(record) {
      let urlJump = this.$router.resolve({
        path: `/timeNodeReport?projectBuildId=${record.projectBuildId}&timeNodeCode=${record.timeNodeCode}`,
      })
      window.open(urlJump.href, '_blank')
    },
    checkFlag(id) {
      getAction(this.url.checkReportFlag, { projectBuildId: id }).then((res) => {
        if (res.code == 200) {
          this.flag = res.result
        }
      })
    },
    doGetTimeData(id) {
      if (id) {
        getAction(this.url.queryListByBuildId, { projectBuildId: id }).then((res) => {
          this.timeListData = res.result || []
          this.visible = true

          this.timeListData.forEach((item) => {
            item.childrens.forEach((subItem) => {
              if (subItem.reportStatus == 2) {
                subItem.colorBg = 'color-suc'
              } else {
                subItem.colorBg = 'color-dis'
              }
            })
          })
        })
      } else {
        this.visible = true
      }
    },
    expandIcon(props) {
      if (Array.isArray(props.record.childrens) && props.record.childrens != 0) {
        if (props.expanded) {
          //有数据-展开时候图标
          return (
            <a
              style="color: 'black',margin-right:0px"
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
              <a-icon type="caret-down" style="color:#53baa7" />
            </a>
          )
        } else {
          //有数据-未展开时候图标
          return (
            <a
              style="color: 'black' ,margin-right:0px"
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
              <a-icon type="caret-right" style="color:#53baa7" />
            </a>
          )
        }
      } else {
        //无数据-图标
        return <span style="margin-right:0px"></span>
      }
    },
  },
}
</script>

<style lang="less" scoped>
.flex-half {
  position: relative;
  flex: 0.5;
  padding: 0;
  cursor: pointer;
  &:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 270%;
    background-color: #e2e2e2;
    top: -15px;
    left: 14%;
    position: absolute;
  }
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  display: inline-block;
  padding: 0;
  position: absolute;
  /* top: 50%; */
  /* margin-top: -5px; */
  left: 0%;
  margin-top: 6px;
  z-index: 1;
  background-color: #ddd;
  &.color-suc {
    background-color: #57c620;
  }
  &.color-err {
    background-color: #f52833;
  }
  &.color-dis {
    background-color: #9db7f0;
  }
}
/deep/ .ant-table-row-indent.indent-level-1 {
  padding-left: 0px !important;
}
</style>